<template>
	<view>
		<u-navbar :is-back="true" title="案例详情" :border-bottom="false" :background="{backgroundColor: '#00a8ff'}">
			<view class="navbar-right" slot="right" @click="openinfo('/pages/order/makeTable/addArrange/addArrange')">
				<u-icon name="zhuanfa" color="#ffffff" slot: size="30" style="margin-right: 20rpx;"></u-icon>
			</view>
		</u-navbar>
		<view class="wrap">
			<u-swiper :list="list" height="600"></u-swiper>
		</view>
		<view class="bgf3f5f7">
			<view class="bgFFFFFF u-p-r-26 u-p-l-26 u-m-b-26">
				<view class="title">
					患者术前下颚部有些下巴后缩，从侧面看轮廓不明显，十分钟解决你的困惑。
				</view>

				<view class="small_card">
					<view class="small_title">
						术前诊断
					</view>
					<view class="small_show_text">
						{{info.surgery_before_text}}
					</view>
					<u-row gutter="16">
						<u-col span="4" v-for="(item,index) in qianImage" :key="index">
							<image :src="oss+item" mode="" style="width: 100%;height: 150rpx;">
							</image>
						</u-col>
					</u-row>
				</view>
				<view class="small_card">
					<view class="small_title">
						方案设计
					</view>
					<view class="small_show_text">
						{{info.design_text}}
					</view>
					<u-row gutter="16">
						<u-col span="4" v-for="(item,index) in zhongImage" :key="index">
							<image :src="oss+item" mode="" style="width: 100%;height: 150rpx;">
							</image>
						</u-col>
					</u-row>
				</view>
				<view class="small_card">
					<view class="small_title">
						手术总结
					</view>
					<view class="small_show_text">
						{{info.surgery_summary}}
					</view>
					<u-row gutter="16">
						<u-col span="4" v-for="(item,index) in houImage" :key="index">
							<image :src="oss+item" mode="" style="width: 100%;height: 150rpx;">
							</image>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="bgFFFFFF u-p-r-26 u-p-l-26 u-m-b-26">
				<view class="title">
					案例所属服务
				</view>
				<view class="u-flex u-margin-top-10 u-margin-bottom-10">
					<view class="u-flex-1">
						<image :src="info.goods_info?oss+info.goods_info.image_id:''" mode=""
							style="width: 150rpx;border-radius: 10rpx;height: 150rpx;"></image>
					</view>
					<view class="u-flex-3">
						<p class="u-col-top">{{info.goods_info?info.goods_info.name:''}}</p>
						<br>
						<p>￥{{info.goods_info?info.goods_info.price:''}}</p>
					</view>
				</view>
			</view>

			<!-- 评论列表 -->
			<!-- <view class="bgFFFFFF u-p-r-26 u-p-l-26 u-m-b-26">
				<view class="small_show_text u-p-t-20 u-p-b-20">
					共247条评论
				</view>
				<view class="">
					评论 <text
						style="display: inline-block;width: 85%;background-color: #f7f4f8;color: #c2bfc2;padding: 10rpx 15rpx;border-radius: 25rpx;margin:0 0 0 25rpx ;">
						精彩评论将被优先展示哦</text>
				</view>
				<view class="container u-skeleton u-p-t-26 u-p-b-26 u-m-l-26 u-m-r-26"
					style="border-bottom: 1px solid #f9f9f9;">
					<view class="u-flex u-col-top">
						<view class="u-flex-1">
							<image src="../../../../static/headPhoto/photo1.png" style="width: 50rpx;height: 50rpx;"
								mode="">
							</image>
						</view>
						<view class="u-flex-7">
							<text>name</text>
							<p class="u-font-12">差点把封面的暮暮认成了唐艺昔</p>
							<text class="textxiao">2021.05.16</text>
						</view>
						<view class="u-flex-1" style="text-align: center;">
							<u-icon name="heart"></u-icon>
							<p class="u-font-12" style="text-align: center;">4</p>
						</view>
					</view>
					<view class="u-flex u-col-top" v-show="true">
						<view class="u-flex-1">
						</view>
						<view class="u-flex-7 u-p-10">
							<view class="u-flex u-col-top">
								<view class="u-flex-1">
									<image src="../../../../static/headPhoto/photo1.png"
										style="width: 50rpx;height: 50rpx;" mode="">
									</image>
								</view>
								<view class="u-flex-7">
									<text>name</text>
									<view class="u-font-12">差点把封面的暮暮认成了唐艺昔
										<text class="textxiao">2021.05.16</text>
									</view>
									<view class="zk">
										展开6条回复
									</view>
								</view>
								<view class="u-flex-1" style="text-align: center;">
									<u-icon name="heart" style="text-align: center;"></u-icon>
									<p class="u-font-12" style="text-align: center;">4</p>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->

			<!-- 点赞收藏回复 -->
			<!-- <view class="bgFFFFFF u-p-r-26 u-p-l-26 u-m-b-26">
				<input type="text" value="" placeholder="说点什么"
					style="display: inline-block;background-color: #f7f5f6;border-radius: 25rpx;padding:15rpx 25rpx;margin-top: 30rpx;width: 40%;" />
				<u-icon name="heart" style="position: relative;
		top: -20rpx;" size="40"></u-icon>
				<text style="position: relative;top: -30rpx;">5419</text>
				<u-icon name="heart" style="position: relative;
		top: -20rpx;" size="40"></u-icon>
				<text style="position: relative;top: -30rpx;">5419</text>
				<u-icon name="heart" style="position: relative;
		top: -20rpx;" size="40"></u-icon>
				<text style="position: relative;top: -30rpx;">5419</text>
			</view> -->

		</view>

	</view>
</template>

<script>
	export default {
		onLoad(e) {
			console.log(e.id);
			this.getinfo(e.id);
		},
		methods: {
			getinfo(id) {
				this.$apiCase.info({
					id: id
				}).then((res) => {
					console.log("res.data.data: ", res.data.data);
					this.info = res.data.data;
					// 拆分images
					// let images=this.listcontent.images.split(',');
					// console.log(images);

					// 处理轮播数据
					let arr1 = this.info.images.split(',');
					for (let key in arr1) {
						this.list.push({
							image: ''
						})
						console.log(this.list[key])
						this.list[key].image = this.oss + arr1[key];
					}
					// 处理其他图片数据
					this.qianImage = this.info.surgery_before_image.split(',');
					this.zhongImage = this.info.design_images.split(',');
					this.houImage = this.info.surgery_summary_images.split(',');

					console.log(this.qianImage + "" + this.zhongImage);

				}).catch((err) => {
					console.log('request fail', err);
				})
			}
		},
		data() {
			return {
				images: [],
				qianImage: [],
				zhongImage: [],
				houImage: [],
				oss: 'http://zjmeifeng.oss-cn-beijing.aliyuncs.com/',
				info: [],
				list: [],

			};
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		// padding: 40rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 700;
		padding: 20rpx 0;
	}

	.small_title {
		font-weight: 700;
	}

	.small_show_text {
		font-size: 22rpx;
		color: #a3a3a5;
		margin: 10rpx 0;
	}

	.P_30 {
		position: relative;
		top: -20rpx;
	}

	.small_card {}

	.textxiao {
		font-size: 22rpx;
		color: #c3c3c3;
	}

	.zk {
		font-size: 20rpx;
		color: #4ccfff;
	}

	.demo-shop {
		font-size: 22rpx;
		color: #b3b3b3;
		margin-top: 5px;
	}

	.flexImage:nth-of-type(2) image {
		margin: 0rpx 15rpx;
	}
</style>
